nginx 反向代理解决跨域

发表于

1.1 原理

因为浏览器存在一个同源策略，所以会有一个跨域的问题。即协议、域名、端口号其中一种不同，就会受到限制，访问不了。

用 nginx 配置一个反向代理，浏览器发起请求，访问 nginx 上的地址，nginx 接收到后，再转化为真实的接口地址，由 nginx 发起访问，这样就不会存在跨域。前提是本地项目地址也要通过 nginx 来访问，这样才能确保协议，域名，端口号都相同。

1.2 场景

浏览器正常访问 192.168.1.126:8080 接口，可以获取数据，而在 js 脚本中发起请求会报跨域问题

1
Failed to load http://192.168.1.126:8080/bill/about?username=440300678596215: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8111' is therefore not allowed access.

浏览器访问本地的项目地址为http://127.0.0.1:8111

1.3 解决方案

配置 nginx.conf 文件，只需配置 server 下的 location

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;

    server {
        listen       80;
        server_name  127.0.0.1;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            # root   html;
            index  home.html index.htm;
            proxy_pass   http://127.0.0.1:8111/;
            proxy_redirect default;
        }

        location  /bill {
            proxy_pass   http://192.168.1.126:8080/bill;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        ......
    }
}

重启 nginx

1
$ ./nginx.exe -s reload

1.4 发起请求

访问 127.0.0.1:80 ，nginx 内部会转发到 http://127.0.0.1:8111

在项目 js 脚本内发出的请求为

1
2
3
4
5
6
7
8
$.ajax({
    type: 'get',
    url: '/bill/about?username=440300678596215',
    data: '',
    success: function (data) {
		console.log('data',data);
    }
})

ajax 发出的 url 路径包含 /bill 会被 nginx 拦截，由 ip 端口为 127.0.0.1:80 的 nginx 转发到

http://192.168.1.126:8080/bill/about?username=440300678596215

那么此时访问项目的协议，域名，端口号和 js 脚本发出的请求都相同，不会再造成跨域。

注意：nginx 转发后的真实接口地址并不会体现在浏览器调试工具上，而是由浏览器发出后再被 nginx 转发，所以浏览器查看的话还是显示 nginx 的地址。

本文结束，感谢您的阅读